<template>
  <van-field
    v-model="pidName"
    is-link
    readonly
    label="选择分类"
    placeholder="选择分类"
    @click="previouCategoryShow = true"
  />
  <van-popup v-model:show="previouCategoryShow" round position="bottom">
    <van-cascader
      v-model="pid"
      title="请选择分类"
      :options="options"
      @close="previouCategoryShow = false"
      @change="onChange"
      @finish="onFinish"
      :field-names="fieldNames"
    />
  </van-popup>
  <!-- 贴吧区域 -->
  <van-swipe-cell v-for="(item, index) in tb" :key="index">
    <van-cell :title="item.tb_name" :value="item.tb_uuid"></van-cell>
    <template #right>
      <van-button square type="primary" text="编辑" />
      <van-button
        square
        type="danger"
        text="删除"
        @click="deleteRole(item.tb_uuid)"
      />
    </template>
  </van-swipe-cell>
  <p class="margin-5"></p>
  <!-- 分页器 -->
  <van-pagination
    v-model="page"
    :total-items="count"
    :items-per-page="size"
    :show-page-size="4"
    @change="pageChange"
  />
  <p class="margin-5"></p>
  <!-- 新建贴吧按钮 -->
  <van-button
    type="primary"
    size="large"
    block
    @click="
      () => {
        if (pidName) {
          addTbShow = true;
        } else {
          Tools.showMessage('请先选择分类!', 'warning');
        }
      }
    "
    >新建贴吧</van-button
  >
  <!-- 弹出框 新建贴吧 -->
  <van-dialog
    v-model:show="addTbShow"
    :title="`在 ${pidName} 里新建贴吧`"
    :show-confirm-button="false"
  >
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="name"
          name="name"
          label="贴吧名称"
          placeholder="贴吧名称"
          :rules="[{ required: true, message: '请填写贴吧名称' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-row>
          <van-col :span="11">
            <van-button
              round
              block
              plain
              type="primary"
              @click="addTbShow = false"
              >取消添加</van-button
            >
          </van-col>
          <van-col :span="11" :offset="2">
            <van-button
              round
              block
              type="primary"
              native-type="submit"
              @click="handlerAddTb"
            >
              添加贴吧
            </van-button>
          </van-col>
        </van-row>
      </div>
    </van-form>
  </van-dialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { Tools } from "../../utils/Tools";

const count = ref(0);
const page = ref(1);
const size = ref(10);
const name = ref("");
const tb = ref(null);
const addTbShow = ref(false);
const addCategoryShow = ref(false);
const { proxy } = getCurrentInstance();
const previouCategoryShow = ref(false);
const pid = ref(0);
const pidName = ref(null);
const options = ref(null);
const fieldNames = {
  text: "cg_name",
  value: "cg_uuid",
};
/* 添加贴吧 */
function handlerAddTb() {
  proxy.$AllRequest
    .addTb({ name: name.value, category: pid.value })
    .then((res) => {
      if (res.data.code == 2000) {
        addTbShow.value = false;
        Tools.showMessage(res.data.msg, "success");
        getTb(pid.value)
      } else {
        Tools.showMessage(res.data.msg, "danger");
      }
    });
}
function onSubmit() {}
function onChange({ selectedOptions, value }) {
  if (selectedOptions[selectedOptions.length - 1].hasChildren) {
    proxy.$AllRequest
      .getCategories(
        1,
        99999999,
        selectedOptions[selectedOptions.length - 1].cg_uuid
      )
      .then((res) => {
        if (res.data.code == 2000) {
          /*    selectedOptions[selectedOptions.length - 1]["children"] = [
            {
              cg_name: selectedOptions[selectedOptions.length - 1].cg_name,
              cg_uuid: selectedOptions[selectedOptions.length - 1].cg_uuid,
            },
          ].concat(res.data.data); */
          selectedOptions[selectedOptions.length - 1]["children"] =
            res.data.data;
        } else {
          Tools.showMessage("获取子分类失败!" + res.data.msg, "danger");
        }
      });
  }
}
function onFinish({ selectedOptions }) {
  previouCategoryShow.value = false;
  pidName.value = selectedOptions[selectedOptions.length - 1].cg_name;
  getTb(selectedOptions[selectedOptions.length - 1].cg_uuid);
}

async function getTb(params = null) {
  return await proxy.$AllRequest
    .getTb(page.value, size.value, params)
    .then((res) => {
      if (res.data.code == 2000) {
        count.value = res.data.count;
        tb.value = res.data.data;
      } else {
        tb.value = [];
        Tools.showMessage("获取贴吧失败!" + res.data.msg, "danger");
      }
    });
}

function getAllCategories() {
  proxy.$AllRequest.getTopCategoriesName(1, 99999999, "帖吧").then((res) => {
    if (res.data.code == 2000) {
      options.value = [{ cg_name: "全部贴吧", cg_uuid: null }].concat(
        res.data.data
      );
    } else {
      Tools.showMessage("获取分类失败!" + res.data.msg, "danger");
    }
  });
}
async function getChildrenCategories(_pid) {
  return await proxy.$AllRequest
    .getCategories(1, 99999999, _pid)
    .then((res) => res.data.data);
}

function pageChange(_newPage) {
  page.value = _newPage;
  getCategories();
}

onMounted(() => {
  getTb();
  getAllCategories();
});
</script>

<style scoped>
</style>
